<template>
  <div>
    <div class="ecahrt-title">
      <el-button @click="clickEvent">掘金</el-button>
    </div>
    <div>
      <div v-show="isShow">
        <echart1></echart1>
      </div>
      <div v-show="!isShow" id="mychart" style="width: 400px; height: 300px"></div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import echart1 from "./juejin/echart1.vue";
export default {
  components: { echart1 },
  data() {
    return {
      isShow:false,
      infos: {
        title: "练习场", //功能标题
        desc: "", //功能描述
        methodDesc: ["图表相关网址","1 http://chartlib.datains.cn/echarts","2 https://www.makeapie.cn/echarts_category/series-pie","3 http://ppchart.com/#/"], //实现原理
      },
      notes: "统计图的堆叠，直接在series中增加对象就好，type指的是图的类型",
      // notes: ["统计图的堆叠，直接在series中增加对象就好，type指的是图的类型"],
    };
  },
  mounted() {
    this.chartInit();
  },
  methods: {
    chartInit() {
      var chartDom = document.getElementById("mychart");
      var mychart = echarts.init(chartDom);
      mychart.setOption({
        title: {
          text: "ECharts 入门示例",
        },
        legend: {
          // Try 'horizontal'
          orient: "horizontal",
          // right: 10,
          top: 25,
        },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
          {
            name: "价格",
            type: "line",
            data: [15, 200, 36, 50, 100, 2],
          },
        ],
      });
    },
    saveInfo(desc) {
      this.infos.methodDesc = desc;
    },
    sendInfo() {
      this.$emit("getInfo", this.infos, this.notes);
    },
    // 跳转
    clickEvent() {
      this.isShow = !this.isShow;
    },
  },
};
</script>
<style scoped>
.ecahrt-title {
  float: right;
}
</style>